<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易计算器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    input {
      background: none;
      outline: none;
      border: 1px solid #ccc;
    }

    .box {
      list-style: none;
      width: 500px;
      height: 30px;
      margin: 100px auto;
    }

    .box li {
      float: left;
      height: 30px;
      border: 1px solid #ccc;
      margin-right: 10px;

    }

    .box li input[type="text"] {
      width: 100px;
      height: 30px;
      font-size: 16px;
      display: inline-block;
    }

    select,
    input[type="button"] {
      width: 50px;
      height: 30px;
    }
  </style>
</head>

<body>
  <ul class="box">
    <li><input type="text" id="num1"></li>
    <li>
      <select name="" id="">
        <option value="">请选择</option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    </li>
    <li><input type="text" id="num2"></li>
    <li><input type="button" value="=" id="count"></li>
    <li><input type="text" id="num3"></li>
  </ul>

  <script src="js/jquery.1.12.4.js"></script>
  <script>
    //获取元素
    let $count = $('#count');
    let $num1 = $('#num1');
    let $num2 = $('#num2');
    let $sele = $('select');
    let $num3 = $('#num3');

    $count.click(function (e) {
      let sum = calculator($sele.val());
      if (isNaN(sum)) {
        $num3.val('');
      } else {
        $num3.val(sum.toFixed(1));
      }
    });

    // 定义一个计算器函数
    // 根据下拉菜单选中的值去匹配相应的算法
    function calculator(val) {
      let sum = 0;
      switch (val) {
        case '+':
          return sum = parseFloat($num1.val()) + parseFloat($num2.val());
          break;
        case '-':
          return sum = parseFloat($num1.val()) - parseFloat($num2.val());
          break;
        case '*':
          return sum = parseFloat($num1.val()) * parseFloat($num2.val());
          break;
        case '/':
          return sum = parseFloat($num1.val()) / parseFloat($num2.val());
          break;
        default:
          return sum = '你输入的有误'
      }
      return sum;
    }
  </script>
</body>

</html>